<template>
  <div class="brand">

   <div class="top">
     <advertisement @close="close" class="brand-ad"></advertisement>
     <brand-header :msg="msg" imgName="arrow-left" imgRight1="heart" imgRight2="share"></brand-header>

     <div class="select">
       <ul>

         <!--<li v-for="(item,index) in select" :class="{active: currentPageIndex === index }"-->
            <!--@click="selectActive();currentPageIndex = index">-->

         <li v-for="(item,index) in select" :class="{active: currentPageIndex === index }" @click="currentPageIndex = index">
             <a href="#">
              <span>
                <i>
                  <img :src="item.img1" v-if="!selectFlag">
                  <img :src="item.img2" v-if="selectFlag">
                </i>
              </span>
               <span>{{item.title}}</span>
             </a>
         </li>


       </ul>
     </div>
   </div>


    <div class="main-scroll">
      <scroll ref="scroll"
              :class="['scroll-content',{marginTop:marginTop}]"
      >

        <main  >
          <div>
            <img src="../../common/images/brand2.png">
          </div>
          <div class="ad ad1">
            <p class="ad1-msg">雅莹集团VIP大牌日，跨专场满498减100，上不封顶</p>
            <span class="leave-time">剩4天</span>
          </div>

          <div class="img">
            <div><a href="#"><img src="../../common/images/img1.png"></a></div>
            <div><a href="#"><img src="../../common/images/img2.png"></a></div>
            <div><a href="#"><img src="../../common/images/img3.png"></a></div>
            <div><a href="#"><img src="../../common/images/img4.png"></a></div>
            <div><a href="#"><img src="../../common/images/img5.png"></a></div>
            <div><a href="#"><img src="../../common/images/img6.png"></a></div>
            <div><a href="#"><img src="../../common/images/img7.png"></a></div>
          </div>
        </main>
      </scroll>
      <!--购物车组件-->

    </div>

    <div class="aside">

      <aside-nav></aside-nav>

     <div class="other">
       <cart-btn></cart-btn>
       <back-top @goTop="goTop"></back-top>
     </div>
    </div>

    <router-view></router-view>

  </div>
</template>

<script>
  import advertisement from 'base/advertisement'
  import brandHeader from 'base/header'
  import cartBtn from '../../base/cartBtn'
  import backTop from '../../base/backTop'
  import scroll from '../../base/scroll'
  import asideNav from '../../base/asideNav'

  export default {
    data() {
      return {
        msg: "科蒙·博卡COMOBOCA羊绒男女混合专场",
        marginTop: false,
        selectFlag:false,
        currentPageIndex:0,
        select:[
          {
            url:'',
            img1:'src/common/images/brand-round.png',
            img2:'src/common/images/round-active.png',
            title:'有货商品'
          },
          {
            url:'',
            img1:'src/common/images/brand-price-t.png',
            img2:'src/common/images/brand-price-b.png',
            title:'价格'
          },
          {
            url:'',
            img1:'src/common/images/brand-price-t.png',
            img2:'src/common/images/brand-price-b.png',
            title:'折扣'
          },
          {
            url:'',
            img1:'src/common/images/brand-select.png',
            img2:'src/common/images/brand-price-b.png',
            title:'筛选'
          }
        ]
      }
    },
    created() {
      document.title = "分类"
    },
    components: {
      advertisement,
      brandHeader,
      cartBtn,
      backTop,
      scroll,
      asideNav
    },
    destroyed(){
      console.log("brand销毁")
    },
    methods: {
      close() {
        setTimeout( ()=> {
          this.marginTop = true
        },500)
      },
      goTop() {
        this.$refs.scroll.scrollTo(0, 0, 1000)
      },

    }
  }
</script>

<style scoped rel='stylesheet/scss' lang='scss'>
  @import "../../common/style/scss/brand.scss";

</style>
